function renderCategory() {
    $.ajax({
        url:'/my/category/list',
        success:function (res) {
            // console.log(res);
            let str = '';
            res.data.forEach((item) => {
                str += `
                <tr>
                    <td>${item.name}</td>
                    <td>2016-11-29</td>
                    <td>${item.alias}</td>
                    <td>
                        <button style="width: 64px; height: 38px;" data-id="${item.id}" type="button" class="layui-btn">修改</button>
                        <button style="width: 64px; height: 38px;" data-id="${item.id}" type="button" class="layui-btn layui-btn-danger">删除</button>
                    </td>
                </tr>`
            });
            $('tbody').html(str)
        }
    })
}

renderCategory()

//删除功能
$('tbody').on('click', 'button:contains("删除")', function () {
    let id = $(this).data('id');
    layer.confirm('Are you confirm', function (index) {
        $.ajax({
            url:'/my/category/delete',
            data:{
                id: id
            },
            success:function (res) {
                console.log($(this).serialize());
                layer.msg(res.message);
                if (res.status === 0) renderCategory();
            }
        })
    })
})

//打开添加的功能
let addIndex;
$('button:contains("添加类别")').on('click', function () {
    addIndex = layer.open({
        type:1,
        title:'添加类别',
        content:$('#styleAdd').html(),
        area:['500px','250px']
    })
})

//添加功能
$('body').on('submit', '#formAdd', function (e) {
    e.preventDefault();
    
    $.ajax({
        type: 'post',
        url: '/my/category/add',
        data:$(this).serialize(),
        success:function (res) {
            console.log(1);
            layer.msg(res.message);
            if (res.status === 0) {
                renderCategory();
                layer.close(addIndex)
            }
        },
        error:function (res) {
            console.log(res);
            layer.msg('不能超过10个字符');
        }
    })
})

//打开修改的功能
let editIndex;
$('tbody').on('click', 'button:contains("修改")', function () {
    let id = $(this).data('id');
    editIndex = layer.open({
        type:1,
        title:'编辑类别',
        content:$('#styleEdit').html(),
        area:['500px','250px']
    })
    $.ajax({
        url: '/my/category/list',
        success:function (res) {
            // console.log(res);
            res.data.forEach((item) => {
                if (item.id === id) {
                    $('#editName').val(item.name)
                    $('#editAlias').val(item.alias)
                    $('#Hid').val(id)
                }
            })
        }
    })
})

//修改功能
$('body').on('submit', '#formEdit', function (e) {
    e.preventDefault();
    // console.log($(this).serialize());
    $.ajax({
        type: 'post',
        url: '/my/category/update',
        data:{
            name:$('#editName').val(),
            alias:$('#editAlias').val(),
            id:$('#Hid').val()
        },
        success:function (res) {
            // console.log(1);
            layer.msg(res.message);
            if (res.status === 0) {
                renderCategory();
                layer.close(editIndex)
            }
        },
        error:function (res) {
            console.log(res);
            layer.msg('不能超过10个字符');//res.responseJSON.message
        }
    })
})

//修改中的重置功能
$('body').on('click', '#resetEdit', function (e) {
    e.preventDefault();
    let id = $('#Hid').val() - 0;//记得减零，不然无法与接下来的item.id判断
    $.ajax({
        url: '/my/category/list',
        success:function (res) {
            console.log(res);
            res.data.forEach((item) => {
                if (item.id === id) {
                    $('#editName').val(item.name)
                    $('#editAlias').val(item.alias)
                    $('#Hid').val(id)
                }
            })
        }
    })
})